// components/organisms/TopIcons.styles.js
import { styled, alpha } from '@mui/material/styles';
import { AppBar, Box, Typography } from '@mui/material';
import { motion } from 'framer-motion';
import backgroundImage from 'images/backgroundLoader.gif';

// Main TopIcons styles
export const StyledAppBar = styled(AppBar)(({ isHomePage }) => ({
  background: isHomePage ? 'transparent' : alpha('#ffffff', 0.8),
  marginTop: 0,
  boxShadow: isHomePage ? 'none' : `0 0 12px ${alpha('#40d47e', 0.3)}`,
  backdropFilter: isHomePage ? undefined : 'blur(6px)',
}));

// LogoComponent styles
export const StyledTypography = styled(Typography)(({ fontSize, darkMode, isHomePage }) => ({
  flex: '0 0 auto',
  fontWeight: 600,
  fontSize,
  fontFamily: '"Monoton Regular", "Roboto", sans-serif',
  position: 'relative',
  display: 'inline-block',
  letterSpacing: '0.05em',
  padding: 0,
  margin: 0,
  height: 'auto',
  lineHeight: 1.1,
  border: 'none',
  textTransform: 'none',
  color: isHomePage ? '#ffffff' : '#40d47e',
  textShadow: isHomePage ? `0 0 6px ${alpha('#40d47e', 0.5)}` : 'none',
}));

export const LogoWrapper = styled(Box)(() => ({
  display: 'flex',
  alignItems: 'center',
  padding: '8px 0px',
  transition: 'all 0.3s ease',
  background: 'transparent',
}));

export const FixedLogoText = styled(motion.div)(({ darkMode, isHomePage }) => ({
  fontFamily: '"Monoton Regular", "Roboto", sans-serif',
  fontSize: '1.2rem',
  fontWeight: 400,
  letterSpacing: '0.05em',
  color: '#40d47e',
  lineHeight: 1.1,
  position: 'relative',
  margin: 0,
  padding: 0,
  textShadow: `0 0 4px ${alpha('#40d47e', 0.5)}`,
}));

// Inline style objects
export const toolbarSx = {
  display: 'flex',
  justifyContent: 'space-between',
  padding: { xs: '0.5rem 1rem', md: '0.5rem 2rem' },
  width: '100%',
};

/*export const dragHandleIconButtonSx = () => ({
  backgroundColor: alpha('#40d47e', 0.1),
  boxShadow: `0 0 8px ${alpha('#40d47e', 0.3)}`,
  transition: 'all 0.2s ease',
  '&:hover': {
    backgroundColor: alpha('#40d47e', 0.2),
    boxShadow: `0 0 12px ${alpha('#40d47e', 0.5)}`,
  },
  '&:active': {
    transform: 'scale(0.95)',
  },
});

export const dragHandleIconSx = () => ({
  color: '#40d47e',
  fontSize: '1.5rem',
  textShadow: `0 0 4px ${alpha('#40d47e', 0.5)}`,
});*/

export const dragHandleIconButtonSx = () => ({
  backgroundColor: '#f0f0f0',     // light gray background
  borderRadius: '4px',            // slightly rounded corners
  boxShadow: 'none',              // flat look
  transition: 'all 0.2s ease',
  '&:hover': {
    backgroundColor: '#e0e0e0',   // subtle hover effect
  },
  '&:active': {
    transform: 'scale(0.95)',
  },
});

export const dragHandleIconSx = () => ({
  color: '#333',                  // neutral dark gray color
  fontSize: '1.5rem',
  textShadow: 'none',             // no shadow/glow
});

// Home page specific styles
export const homePageContainerSx = {
  height: '100vh',
  backgroundImage: `url(${backgroundImage})`,
  backgroundSize: 'cover',
  backgroundPosition: 'center',
  backgroundRepeat: 'no-repeat',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'space-between',
  width: '100%',
};

export const homePageBottomBoxSx = {
  marginBottom: '4rem',
  textAlign: 'center',
  padding: '0 1rem',
};

export const homePageH1Sx = {
  fontWeight: 'bold',
  color: '#ffffff',
  marginBottom: '1rem',
  textShadow: `0 0 6px ${alpha('#40d47e', 0.6)}`,
};

export const homePageH2Sx = {
  fontWeight: 'bold',
  color: '#ffffff',
  textShadow: `0 0 5px ${alpha('#40d47e', 0.4)}`,
};

// LogoComponent specific styles
export const fixedLogoContainerSx = {
  position: 'fixed',
  top: '10px',
  left: { xs: '10px', sm: '20px' },
  zIndex: 1300,
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'flex-end',
};

export const logoLinkStyle = {
  display: 'flex',
  alignItems: 'center',
  textDecoration: 'none',
  cursor: 'pointer',
};

export const logoTextContainerSx = {
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'flex-end',
};

export const logoTextSx = {
  lineHeight: 0.8,
};

/*export const homeIconSx = (iconSize, darkMode, isHomePageRoute) => ({
  fontSize: iconSize,
  color: '#40d47e',
  filter: 'drop-shadow(0 0 4px #40d47e)',
});

export const homeIconButtonSx = (iconSize) => ({
  fontSize: iconSize,
  width: iconSize,
  height: iconSize,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  ml: '-5px',
  '&:active': {
    transform: 'scale(0.97)',
  },
});*/

export const homeIconSx = (iconSize) => ({
  //fontSize: iconSize,
  color: '#333',              // neutral dark gray
  filter: 'none',             // remove glow/shadow
});

export const homeIconButtonSx = (iconSize) => ({
  //fontSize: iconSize,
  //width: iconSize,
  //height: iconSize,
  display: 'flex',
  backgroundColor: '#f0f0f0', // light gray background
  borderRadius: '4px',        // slightly rounded corners
  boxShadow: 'none',          // flat appearance
  display: 'none',
  alignItems: 'center',
  justifyContent: 'center',
  ml: '-5px',
  '&:active': {
    transform: 'scale(0.97)',
  },
});

// PortalDraghandleButton styles
/*export const portalButtonSx = (_, additionalStyle = {}) => ({
  backgroundColor: alpha('#40d47e', 0.1),
  boxShadow: `0 0 8px ${alpha('#40d47e', 0.3)}`,
  ...additionalStyle,
});

export const portalDragIconSx = () => ({
  color: '#40d47e',
  fontSize: '1.5rem',
  textShadow: `0 0 4px ${alpha('#40d47e', 0.5)}`,
});*/

// PortalDraghandleButton styles (updated for flat, light-gray style)
export const portalButtonSx = (_, additionalStyle = {}) => ({
  backgroundColor: '#f0f0f0', // light gray
  borderRadius: '4px',        // slightly rounded corners
  boxShadow: 'none',          // flat appearance
  ...additionalStyle,
});

export const portalDragIconSx = () => ({
  color: '#333',              // neutral icon color
  fontSize: '1.5rem',
  textShadow: 'none',         // no glow
});

// Fixed button position styles
export const fixedButtonStyle = (buttonCoords) => ({
  position: 'fixed',
  top: 10,
  right: `${buttonCoords.right}px`,
  transform: 'translateZ(0)',
  willChange: 'transform',
  zIndex: 1300,
});